<template>
  <div class="custom-search">
    <van-field
      :placeholder="keyword"
      input-align="center"
      shape="round"
      @click.stop="goToPage('search')"
    >
      <template #left-icon>
        <div class="left" @click.stop="goToPage('cityList')">
          <van-icon name="location" />
          <span>{{ currentPosition }}</span>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="search" />
      </template>
    </van-field>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// const props = defineProps({
//   keyword: String,
//   currentPosition: String,
// })
const { keyword, currentPosition } = defineProps(['keyword', 'currentPosition'])

const goToPage = (page) => {
  router.push({ path: `/${page}` })
}
</script>

<style scoped lang="scss">
.custom-search {
  background-color: #fff;
  padding: 10px 15px;

  :deep(.van-field) {
    border-radius: 20px;
    background-color: #f7f8fa;
  }

  :deep(.van-field__control) {
    text-align: center;
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000;
    position: relative;

    .span {
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>
